<template>
	<view class="wrap">
		<!-- 提示框 -->
		<u-toast ref="uToast" />
		<TopShow :avatar='avatarUrl'></TopShow>
		<!-- 表单 -->
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120" label-position="left" label="姓名" prop="username">
				<u-input :border="false" placeholder="请输入姓名" v-model="model.username" type="text"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="性别" prop="sex">
				<u-input :border="false" type="select" :select-open="actionSheetShow" v-model="sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="评分" >
				<u-input :border="false" type="select" :select-open="actionSheetShow2" v-model="ping" placeholder="" @click="actionSheetShow2 = true"></u-input>
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
		<footNav></footNav>
		<!-- 上拉列表 -->
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-select mode="single-column"  v-model="selectShow"></u-select>
		<u-action-sheet :list="actionSheetList2" v-model="actionSheetShow2" @click="actionSheetCallback2"></u-action-sheet>
		<u-select mode="single-column"  v-model="selectShow" ></u-select>
	</view>
</template>

<script>
	import TopShow from '@/components/TopShow/TopShow.vue'
	import footNav from '@/components/footNav/footNav.vue'
	import {mixins} from '@/public.js'
export default {
	components:{TopShow,footNav},
	mixins:[mixins],
	data() {
		let that = this;
		return {
			model: {
				username: '',
				gender: 2,
			    forbid_rate:1,
				avatarUrl:'',
			},
			sex:'',
			ping:'允许',
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'blur' ,
					},
					{
						min: 3,
						max: 5,
						message: '姓名长度在3到5个字符',
						trigger: ['change','blur'],
					},
					
				
				],
			
			},	
			selectStatus: 'close',
			
			actionSheetList: [
				{
					text: '男',
					value:1
				},
				{
					text: '女',
					value:0
				},
				{
					text: '保密',
					value:2
				}
			],
			actionSheetList2: [
				{
					text: '允许其他用户对我评分(默认)',
					active:1
				},
				{
					text: '禁止其他用户对我评分',
					active:0
				}
			],
			actionSheetShow: false,
			actionSheetShow2: false,
			selectShow: false,
			selectShow2: false,
			errorType: ['message'],
		};
	},
	onLoad() {

	},
	computed: {
		myMsg(){
			return JSON.parse(uni.getStorageSync('myMsg'))
		}
	},
	created() {
		//渲染获得的数据
		this.sex  =  this.myMsg.gender==0? '女': this.myMsg.gender==1?'男':'保密'
		this.model.username=this.myMsg.username
		this.model.avatarUrl=this.myMsg.avatar
		this.model.gender=this.myMsg.gender
	},
	onReady() {
		//启用表单提交检测
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					//获得改变的图片地址
					this.model.avatarUrl=this.vuex_avatar || this.myMsg.avatar
					
					//调用修改信息接口
					this.$api.msgChange(this.model).then(
					res=>{
						if(res!==0){
							this.$refs.uToast.show({
							duration: 3000,
							title: '修改成功',
							type: 'success',			
						});
						this._m_getUserMsg()
						}else{
							this.$refs.uToast.show({
								duration: 3000,
								title: '上传失败',
								type: 'error',
													
							});
						}
						
					}
					)
				} else {
					console.log('验证失败');
				}
			});
		},
		// 点击actionSheet回调
		actionSheetCallback(index) {
			uni.hideKeyboard();
			this.sex = this.actionSheetList[index].text;
			this.model.gender = this.actionSheetList[index].value;
		},
		actionSheetCallback2(index) {
			uni.hideKeyboard();
			this.model.forbid_rate = this.actionSheetList2[index].active;
			this.model.forbid_rate==0?this.ping='禁止':this.ping='允许'
		},
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
}

</style>
